<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态添加和删除节点</title>
		<style type="text/css">
			.myArea{ width: 100%; height: 80px;}
			.myDiv{ line-height: 30px;}
		</style>
		<script>
            // ======代码=======
        </script>
	</head>
	<body>
		<h2>工作经历</h2>
    <hr />
    <div id="myContainer">
        <div class="myDiv" id="div1">
            公司名称:<input type="text" />
            职位:<input type="text" />
            <a href="#" onclick="del()">删除工作经历</a>
            <br />
            工作职责及工作内容描述:
            <textarea class="myArea"></textarea>
            <hr />
        </div>
    </div>

    <div style="line-height: 30px; text-align: right;">
        <a href="#" onclick="add()">添加工作经历</a>
    </div>
		<script>
			//获取div
			var div = document.querySelector("#myContainer");
			var divArr = document.querySelector("#myContainer").childNodes;
			var length = divArr.length;
	
			function add() {
		
				var textArr = document.querySelectorAll("input");
				var text = textArr[0].value;
				var text1 = textArr[1].value;
				var text2 = document.querySelector(".myArea").value;
				
				var div = document.querySelector("#myContainer");
				var divMode = document.createElement("div");
				divMode.innerHTML = "公司名称:" + text + "<br/>" + "职位:" + text1 + "<br/>" + "工作职责及工作内容描述:" + text2 + "<br/><hr>";
				div.appendChild(divMode);
				
				textArr[0].value = ""; textArr[1].value = ""; document.querySelector(".myArea").value = "";
				length++;
	
			}
			function del() {
				if (length >= 3) {
					div.removeChild(divArr[--length]);
				}
	
	
			}
		</script>
	</body>
</html>